<template>
  <div class="demo">
    <h1>{{ msg }}</h1>
    <!--通过父组件给子组件传递函数类型的props实现了子给父传递数据-->
    <School :getSchoolName="getSchoolName" />

    <!--通过绑定一个自定义事件实现了子给父传递数据(自定义事件绑在子组件上) 第一种写法使用@或v-on-->
    <!-- <Student v-on:personEvent="getStudentName" /> -->

    <!--通过绑定一个自定义事件实现了子给父传递数据(自定义事件绑在子组件上) 第二种写法使用refs-->
    <!-- <Student ref="student" /> -->

    <!-- 绑定多个自定义事件 -->
    <Student v-on:personEvent="getStudentName" @personEvent2="eventDemo()"/>
  </div>
</template>

<script>
import School from "./components/School.vue";
import Student from "./components/Student.vue";
export default {
  name: "App",
  components: {
    School,
    Student,
  },
  data() {
    return {
      msg: "你好",
    };
  },
  methods: {
    getSchoolName(name) {
      console.log("接收学校的姓名", name);
    },
    getStudentName(name, ...params) {
      // ES6剩余参数，用数组来接收
      console.log("接收学生的姓名", name, params);
      console.log(`剩余参数,${params}`);
    },
    eventDemo() {
      console.log('第二个绑定事件')
    }
  },
  mounted() {
    // 如果想让自定义事件只执行一次，可以$on变$once
    // 使用ref的方式会更灵活一下，可以几秒之后进行操作，下面通过setTimeout举例
    // this.$refs.student.$on("personEvent", this.getStudentName)

    // // 几秒之后进行自定义事件
    // setTimeout(()=>{
    //   this.$refs.student.$on("personEvent", this.getStudentName)
    // }, 3000)
  },
};
</script>

<style>
.demo {
  background-color: gray;
}
</style>